<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" id="input" />
    <script>
      //防抖原理： 在执行过程中，如果调用多次，后者覆盖前者
      // 实现原理：创建一个定时器，在指定的时间间隔之后运行代码。
      // 当在n 秒内再次触发事件时，会自动清除上一次的时间器，再重新等待 n 秒后再执行。

      //防抖多用于输入内容、键盘等事件
      var input = document.getElementById('input');
      function dot(fn, delay = 1000) {

        var timer;
        return function () {
            var content = this;
        var consult = arguments;
          clearInterval(timer);
          timer = setTimeout(function () {
            fn.apply(content, consult);
          }, 1000);
        };
      }
      input.addEventListener(
        'keyup',
        dot(function (event) {
          console.log('zhix');
          console.log(this);
          console.log(event);
        })
      );
    </script>
  </body>
</html>
